<template>
  <div class="pd-t-15 pd-l-30">
    <div style="height: 40px">
      <transition name="el-zoom-in-top">
        <el-button v-show="showBatchDelBtn" type="danger" @click="batchDelete">批量删除</el-button>
      </transition>
    </div>
    <el-table
        stripe
        :data="articleList"
        style="max-width: 1080px;width: 90%"
        empty-text="暂无文章"
        :default-sort="{prop: 'id', order: 'ascending'}"
        class="mt-10 mb-15"
        @selection-change="handleSelectionChange"
        border>
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          label="创建日期"
          width="180">
        <template v-slot="{row}">
          {{ $dayjs(row.creationTime * 1).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>
      <el-table-column
          label="标题"
          prop="title"
          width="300"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="操作">
        <template v-slot="{row}">
          <span class="flex flex-row flex-nowrap">
            <el-button icon="el-icon-view" @click="openDrawer(row,'preview')" type="primary">查看详细</el-button>
            <el-button type="primary" plain @click="openDrawer(row,'edit')">编辑</el-button>
            <el-button icon="el-icon-delete" type="danger" @click="delArticle([row.id])">删除</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer custom-class="pd-20" :title="default_open" direction="ltr" size="70%" :visible.sync="drawer">
      <el-button type="primary" @click="updateArticle" v-if="default_open === 'edit'">保存修改</el-button>
      <mavon-editor
          ref="md"
          class="mt-15"
          @imgAdd="imgAdd"
          :toolbars="toolbars"
          v-model="openedArticle.detail"
          :toolbarsFlag="toolbarsFlag"
          :subfield="false"
          :default-open="default_open"
      />
    </el-drawer>
    <!-- 分页器 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        v-show="total>10"
        :page-size="limit"
        :current-page.sync="pageNo"
    ></el-pagination>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "ArticleList",
  data() {
    return {
      drawer: false, // 抽屉开关
      openedArticle: {}, // 正在操作的文章 oasis-open
      toolbarsFlag: false,
      showBatchDelBtn: false,
      multipleSelection: [],// 被选中的行
      'default_open': 'preview',
      limit: 10,
      pageNo: 1,
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: false, // 展示html源码
        help: false, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      }
    }
  },
  mounted() {
    this.getArticles()
  },
  methods: {
    imgAdd(pos, $file) {
      // 将图片上传到服务器.
      let formdata = new FormData();
      formdata.append('img', $file);
      this.$store.dispatch('article/uploadImage', formdata).then(url => {
        // 替换url到原本文本位置
        this.$refs.md.$img2Url(pos, url)
      })
    },
    getArticles() {
      let {pageNo, limit} = this;
      this.$store.dispatch('article/getArticles', {society_id: this.$store.getters.society_id, pageNo, limit})
    },
    openDrawer(article, default_open) {
      this.toolbarsFlag = default_open === 'edit';
      this.default_open = default_open
      this.openedArticle = article
      this.drawer = true
    },
    async delArticle(ids) {
      this.$store.dispatch('article/delArticle', ids).then(
          () => {
            this.$message.success('删除成功')
            this.getArticles()
          }
      )
    },
    async batchDelete(){
      this.$store.dispatch('article/delArticle', this.multipleSelection).then(
          () => {
            this.$message.success('删除成功')
            this.getArticles()
          }
      )
    },
    updateArticle() {
      this.$store.dispatch('article/updateArticleDetail', this.openedArticle).then(() => {
        this.$message.success('修改成功')
        this.openedArticle = {}
        this.drawer = false
        this.getArticles()
      })
    },

    handleSelectionChange(val) {
      this.showBatchDelBtn = val.length !== 0;
      let arr = []
      val.forEach(item=>{
        arr.push(item.id)
      })
      this.multipleSelection = arr
    }
  },
  computed: {
    ...mapState('article', ['articleList', 'total'])
  },
  watch: {
    pageNo() {
      this.getArticles()
    }
  }
}
</script>

<style scoped lang="scss">

</style>